<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<include file="_layout/mall.head.html" />
	<literal>
	<style>
	.goods-header .goods-price{padding:5px 10px 2px;text-align:left}
	.current-price{color:#f0342b;display:inline-block;font-size:18px}
	.original-price{display:inline-block;font-size:12px;margin-left:10px;text-decoration:line-through;color:#ddd}
	.other-info{background-color:#fff;padding:0 10px}
	.other-info dl{margin:8px 0;width:50%;float:left}
	.other-info dt{float:left;color:#999}
	.other-info dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.store-arrow-right:after{content:'';position:absolute;top:15px;right:10px;width:6px;height:11px;background:url("/img/mall/goods@2x_c9431a6d41.png") no-repeat;background-position:-40px -18px;background-size:58px 48px}
	.goods-detail{margin-top:10px}
	.tabber button.active,.tabber a.active{position:relative;top:1px;line-height:39px;}
	.tabber button,.tabber a{float:left;width:33.33%;height:40px;line-height:40px;border:0px none;outline:0px none;background-color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
	.custom-richtext{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:16px;color:#333;overflow:hidden;text-align:left;word-wrap:break-word;overflow-x:auto}
	.block-list-traderecord{padding-left:0;margin-bottom:30px;background-color:#fff;width:100%;border-top:0px none}
	.block-list-traderecord .list-header{padding:0 10px;height:33px;line-height:33px;background-color:#f2f2f2;border-bottom:2px solid #e5e5e5;border-bottom-width:1px;display:table;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
	.block-list-traderecord .list-header .col-1{text-indent:12px}
	.block-list-traderecord .list-header .col-1,.block-list-traderecord .block-item .col-1{width:34%}
	.block-list-traderecord .list-header span,.block-list-traderecord .block-item span{display:table-cell;font-size:12px}
	.block-list-traderecord .list-header .col-2,.block-list-traderecord .block-item .col-2{width:33%}
	.block-list-traderecord .list-header .col-3,.block-list-traderecord .block-item .col-3{width:33%}
	.block-list-traderecord .list-header,.block-list-traderecord .block-item{display:table;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
	.block-list-traderecord .block-list{border-top-width:0;border-bottom-width:0}
	.custom-richtext img{max-width: 100%;display:block;}
	.custom-store .custom-store-link{display:block}
	.custom-store .custom-store-img{position:absolute;top:11px;left:0;height:18px;width:18px;background:url(/img/mall/goods@2x_c9431a6d41.png) -40px 0 no-repeat;background-size:58px 48px}
	.custom-store .custom-store-name{float:left;padding:0 0 0 25px;height:22px;line-height:22px;font-size:14px;color:#333;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
	.custom-store .custom-store-enter{float:right;height:14px;line-height:14px;margin:4px 0;font-size:12px;color:#999;padding-right:15px}
	.goods-store.block-list .renzheng .rz-item{padding-right:16px;white-space:nowrap}
	.goods-store.block-list .offline-store .offline-store-img{display:inline-block;vertical-align:middle;width:18px;height:18px;background-position:0 -30px;background-image:url("/img/mall/goods@2x_c9431a6d41.png");background-repeat:no-repeat;background-size:58px 48px}
	.goods-store.block-list .renzheng .rz-item::before,.goods-store.block-list .offline-store .offline-store-img{background-image:url("/img/mall/goods@2x_c9431a6d41.png");background-repeat:no-repeat;background-size:58px 48px}
	.goods-store.block-list .renzheng .rz-item::before{content:'';display:inline-block;vertical-align:middle;width:13px;height:13px;background-position:-18px -30px}
	.goods-store.block-list .renzheng .rz-item.false::before{background-position:-33px -30px;}
	.bottom-fix{padding:0}
	.components-container{background-color:#fff}
	</style>
	</literal>
</head>
<body class="body-fixed-bottom">
	 <div class="container wap-goods internal-purchase">
		<div class="content ">
			<div class="content-body">
				<!-- 商品轮播图 -->
				<div class="scale_wh scale_100">
					<div class="scale_content">
						<div class="js-banner swiper-container">
							<div class="swiper-wrapper">
								<foreach name="data['images']" item="url">
								<div class="swiper-slide"><img src="{$url}" /></div>
								</foreach>
					  		</div>
					  		<div class="swiper-tip">温馨提示：长按图片保存到手机</div>
					  		<div class="pagination"></div>
						</div>
					</div>
				</div>
				<div class="goods-header">
					<h2 class="title">{$data.title}</h2>
					<div class="goods-price">
						<div class="current-price">
							<span style="font-size: 12px;">{$data['agents'][$user['agent_level']]['price_title']}：¥</span><i class="js-goods-price price">{$data['agents'][$user['agent_level']]['price']}</i>
						</div>
					</div>
				</div>
				<div class="other-info clearfix">
					<if condition="$user['agent_level'] eq 0">
					<dl>
						<dt>{:end($data['agents'])['price_title']}：</dt>
						<dd>{:end($data['agents'])['price']}元</dd>
					</dl>
					<else/>
					<dl>
						<dt>{$data['agents'][0]['price_title']}：</dt>
						<dd>{$data['agents'][0]['price']}元</dd>
					</dl>
					</if>
					<dl><dt>月销量：</dt><dd>{$data['sold_num']}件</dd></dl>
					<notempty name="data['send_place']">
					<dl><dt>发货地：</dt><dd>{$data.send_place}</dd></dl>
					</notempty>
					<dl><dt>单品重：</dt><dd>{$data['weight']}kg</dd></dl>
					<if condition="is_numeric($data['freight_fee'])">
					<dl><dt>最低运费：</dt><dd>{$data['freight_fee']}元</dd></dl>
					<else />
					<dl><dt>快递费：</dt><dd>{$data['freight_fee']}</dd></dl>
					</if>
					<eq name="data['hide_stock']" value="0">
					<dl><dt>库存量：</dt><dd>{$data.stock}件</dd></dl>
					</eq>
					<dl><dt>赠积分：</dt><dd>0</dd></dl>
				</div>
				<div class="js-store-info">
					<div class="block block-list goods-store">
						<div class="custom-store block-item ">
							<a class="custom-store-link clearfix" href="/h5/list?shop_id={$data['shop_id']}">
								<div class="custom-store-img"></div>
								<div class="custom-store-name">{$data['shop_name']}</div>
								<span class="custom-store-enter">进入店铺</span>
								<span class="offline-store-enter pull-right store-arrow-right"></span>
							</a>
						</div>
						<div class="renzheng block-item c-gray-darker" style="text-align:center">
							<span class="js-rz-item-alert rz-item {$data['invoice'] ? '' : 'false'}" data-type="team_certificate_person">
								<span class="rz-name font-size-12">发票</span>
							</span>
							<span class="js-rz-item-alert rz-item {$data['warranty'] ? '' : 'false'}" data-type="is_secured_transactions">
								<span class="rz-name font-size-12">保修</span>
							</span>
							<span class="js-rz-item-alert rz-item {$data['returns'] ? '' : 'false'}" data-type="team_physical">
								<span class="rz-name font-size-12">退换</span>
							</span>
							<span class="js-rz-item-alert rz-item {$data['freight_fee'] == '包邮' ? '' : 'false'}" data-type="team_physical">
								<span class="rz-name font-size-12">包邮</span>
							</span>
						</div>
					</div>
				</div>
				
				<!-- 图文、成交记录 -->
				<div class="js-tabber-container goods-detail">
					<div class="js-tabber tabber clearfix">
						<button data-type="goods" class="active" style="width:50%">商品详情</button>
						<button data-type="similar" data-id="{$data.id}" style="width:50%;color:black;" >同类推荐</button>
					</div>
					<div class="js-tabber-content">
						<div class="js-part js-goods-detail goods-tabber-c" data-type="goods">
							<notempty name="data['remote_area']">
								<div class="custom-notice text-center">此商品{$data['remote_area']}不发货</div>
							</notempty>
							<div class="block block-list">
								<if condition="($data['parameters']!='') and ($data['sku_json']!='')">
								<foreach name="data['sku_json']" key="spec_pid" item="item">
								<div class="block-item">
									<label>{$item.text}:</label>
									<span><foreach name="item['items']" item="val">{$val.text}&nbsp;</foreach></span>
								</div>
								</foreach>
								<if condition="($data['parameters']!='')">
								<foreach name="data['parameters']" item="item">
								<div class="block-item">
									<label>{$item[0]}:</label>
									<span>{$item[1]}</span>
								</div>
								</foreach>
								</if>
								</if>
							</div>
							<div class="js-components-container components-container">
								<div id="detail_container" class="custom-richtext"></div>
                                <if condition="$data['shop_id'] eq 12753">
                                <div style="text-align:center">
                                <span style="color: #f90;">长按二维码观看韩国代购直播</span>
                                <img src="__CDN__/upload/image/20161017/491778204446010346.jpg" style="width:80%">
                                </div>
                                <else />
								<div class="empty-list"><div><a class="js-lxkf tag tag-big tag-orange" data-type="2" href="javascript:;">获取小视频</a></div></div>
                                </if>
							</div>
						</div>
						<div class="js-part hide" data-type="similar" style="margin-bottom:20px">
							<ul class="js-goods-list sc-goods-list pic clearfix size-2">
								<li><div style="padding:30px 0;text-align:center">正在加载中...</div></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="js-bottom-opts js-footer-auto-ele bottom-fix">
					<div class="sku-layout">
		            	<div class="content-foot clearfix">
		            		<a href="javascript:;" class="js-add-collect collect{$other['is_collection'] ? ' checked' : ''}" data-id="{$data.id}"></a>
							<a href="javascript:;" class="kefu js-lxkf" data-shop="{$data.shop_id}" data-goods="{$data.id}"></a>
							<a class="cart" href="/h5/cart"><b class="js-cart-num">{$other['cart_num']}</b><em id="J-addone">+1</em></a>
							<if condition="$disabled">
                            <div class="actions clearfix">
                                <button id="btn_buy" type="button" class="btn-buy btn btn-orange-dark disabled">{$disabled_msg}</button>
                            </div>
							<else/>
                            <div class="actions actions-2 clearfix">
                                <button id="btn_add_cart" type="button" class="btn-cart btn btn-orange">加入购物车</button>
                                <button id="btn_buy" type="button" class="btn-buy btn btn-orange-dark">立即下单</button>
                            </div>
							</if>
						</div>
		            </div>
				</div>
			</div>
		</div>
		<include file="_layout/mall.copyright.html" />
	</div>
	<div id="right-icon" class="js-right-icon no-text" style="bottom:100px">
		<div class="js-right-icon-container right-icon-container clearfix" style="width: 50px;">
			<a id="global-back" href="javascript:win.back();" class="icon new s1"></a>
	</div></div>
</body>

<script type="text/javascript">
	// 购买/兑换
	require(['skumodal'], function(ShoppingCart){
		$('#btn_buy').on('click',function(){
			var goods_id = this.getAttribute('data-id');
			new ShoppingCart({
				id: {$data.id},
				buttons:{'buyNow': '立即下单'},
			});
			return false;
		});
		
		$('#btn_add_cart').on('click',function(){
			var goods_id = this.getAttribute('data-id');
			new ShoppingCart({
				id: {$data.id},
				buttons:{'addCart': '加入购物车'},
			});
			return false;
		});
	});
	
	<if condition="IS_WEIXIN">
	//分享
	require(['jsweixin'], function(jweixin){
	   jweixin.init({$sign}, function(){
			jweixin.share({$share_data});
	   });
	});
	</if>

	requirejs(['jquery'], function(){
        require(['swiper'], function(){
            var mySwiper = new Swiper('.js-banner',{
                autoplay : 5000,
                loop : true,
                autoplayDisableOnInteraction : true,
                pagination : '.js-banner .pagination'
            });

            var $banner = $('.js-banner'),
            $wrapper = $banner.children('.swiper-wrapper');
            $banner.on('click', function() {
                $banner.toggleClass('full-screen');
                if($banner.hasClass('full-screen')){
                    $wrapper.css('line-height', document.documentElement.clientHeight+'px');
                }else{
                    $wrapper.css('line-height', '');
                }
                return false;
            });
        });
        
		// 切换商品详情/成交记录
		var $tabberContainer = $('.js-tabber-container'),
		fixedTop = $tabberContainer.offset().top,
		$tabber = $tabberContainer.children('.js-tabber');
		$('.js-tabber>button').on('click', function(){
			var $this = $(this);
			$this.addClass('active').siblings().removeClass('active');
			$('.js-tabber-container>.js-tabber-content>.js-part[data-type="'+$this.attr('data-type')+'"]').removeClass('hide').siblings().addClass('hide');
		
			document.body.scrollTop = fixedTop;
			
			// 同类商品
			if($this.data('type') == 'similar' && !$this.data('loading')){
				$this.data('loading', 1);
				require(['goods_list'], function(gv){
					gv.start({
						url: '{$same_url}',
						container: '.js-goods-list',
					}); 
				});
			}
			return false;
		});
		
		window.addEventListener('scroll', function(){
			if(document.body.scrollTop > fixedTop){
				$tabber.addClass('top-fix');
			}else{
				$tabber.removeClass('top-fix');
			}
		}, false);
		
		// 显示图文详情
		$('#detail_container').load('/h5/goods/detail?id={$data["id"]}');
	});
</script>
</html>